<template>
  <BaseContextMenu ref="bcm">
    <div :style="{
      background: `var(--bg-body)`,
      boxShadow: 'var(--shadow-convex)',
      padding: '2px',
      overflow: `hidden`,
    }">
      <div v-if="title" c-white style="background-image: var(--bg-title);" lh="6" px2>
        {{ title }}
      </div>
      <div v-for="item in menuItems"
        flex items-center pl2 pr12 py2 b-b="1px solid #ffffff10" class="my-action"
        @click="onClick(item)">
        <ElIcon v-if="item.icon" mr1>
          <component :is="item.icon"></component>
        </ElIcon>        
        <div flex-shrink-0>{{ item.title }}</div>
      </div>
      <div text-gray v-if="menuItems.length === 0" pl2 pr12 py2>无操作</div>
    </div>
    
  </BaseContextMenu>
</template>

<script setup lang="ts">
import type { Component } from 'vue';
const bcm = ref(null as any)

interface MenuItem {
  title: string,
  icon?: Component,
  action: (context: any) => boolean,
}

const props = defineProps<{
  title?: string,
  context: any,
  menuItems: MenuItem[]
}>()

function onClick(item: MenuItem) {
  if(item.action(props.context)) {
    bcm.value?.hide()
  }
}
</script>